<template>
    <div class="chart-container">
        <div class="connect">
            <el-form :model="deviceInfoForm" ref="deviceInfoForm" label-width="100px" class="demo-ruleForm"
                label-position="top">
                <el-form-item label="设备类型" prop="type">
                    <el-select v-model="deviceInfoForm.type" style="width: 100%;" placeholder="请选择设备类型">
                        <el-option label="集成处理器" value="shanghai"></el-option>
                        <el-option label="单机处理器" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="串口类型" prop="serialPortType">
                    <el-select v-model="deviceInfoForm.serialPortType" style="width: 100%;" placeholder="请选择串口类型">
                        <el-option label="是" value="shanghai"></el-option>
                        <el-option label="否" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="串口名称" prop="serialPortName">
                    <el-input v-model.number="deviceInfoForm.serialPortName" autocomplete="off"
                            placeholder="请输入串口名称"></el-input>
                </el-form-item>
                <el-form-item label="串口模式" prop="serialPortPattern">
                    <el-select v-model="deviceInfoForm.serialPortPattern" style="width: 100%;" placeholder="请选择串口模式">
                        <el-option label="是" value="shanghai"></el-option>
                        <el-option label="否" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="波特率" prop="baudRate">
                    <el-select v-model="deviceInfoForm.baudRate" style="width: 100%;" placeholder="请选择波特率">
                        <el-option label="是" value="shanghai"></el-option>
                        <el-option label="否" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="数据位" prop="dataBits">
                    <el-select v-model="deviceInfoForm.dataBits" style="width: 100%;" placeholder="请选择数据位">
                        <el-option label="是" value="shanghai"></el-option>
                        <el-option label="否" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="校验位" prop="checksum">
                    <el-select v-model="deviceInfoForm.checksum" style="width: 100%;" placeholder="请选择校验位">
                        <el-option label="是" value="shanghai"></el-option>
                        <el-option label="否" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="停止位" prop="stopPosition">
                    <el-select v-model="deviceInfoForm.stopPosition" style="width: 100%;" placeholder="请选择停止位">
                        <el-option label="是" value="shanghai"></el-option>
                        <el-option label="否" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="流控" prop="flowControl">
                    <el-select v-model="deviceInfoForm.flowControl" style="width: 100%;" placeholder="请选择流控">
                        <el-option label="是" value="shanghai"></el-option>
                        <el-option label="否" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <div class="flex">
                    <el-form-item>
                        <el-button type="primary" @click="readForm()">读取配置</el-button>
                        <el-button type="success" @click="submit()">保存配置</el-button>
                    
                    </el-form-item>
                </div>

            </el-form>
        </div>
    </div>
</template>

<script>


export default {
    name: 'LineChart',

    data() {
        return {
            deviceInfoForm: {
                type: '集成处理器',
                serialPortType: '串口A',
                serialPortName: '',
                serialPortPattern: 'Rs-232',
                baudRate: '115200',
                dataBits: '8',
                checksum: '无校验位(None)',
                stopPosition: '1位',
                flowControl: '无流控(None)'
            },
          
        };
    },
    methods: {
        readForm() {
            alert('读取')
        },
        submit() {
            alert('保存')
        }
    }

}
</script>

<style scoped>
.chart-container {
    position: relative;
    width: 100%;
    height: calc(100vh - 152px);
    padding: 20px 20px 20px 20px;
    background-color: #ffffff;
    font-family: SourceHanSansSC-regular;
    font-size: 16px;
}

.trafficChart {
    width: 100%;
    height: 288px;
    /* background-color: #cccccc; */
}

.connect {
    height: calc(100% - 300px);
    /* overflow: auto; */
}

::v-deep .el-form-item--small.el-form-item {
    margin-bottom: 18px;
}

::v-deep .el-form-item--small .el-form-item__label {
    line-height: 20px;
}

.flex {
    display: flex;
    justify-content: center;
}
</style>